<template>
	<view class="container">
		<view class="image-container">
			<image :src="src" mode="aspectFill" class="selected-image" @click="chooseImg" />
		</view>
		<text style="color: #000000;">点击图片切换头像</text>
		<view class="login" @click="login">登录</view>
		<view class="clear" @click="clear">退出登录</view>
		<view class="information">
			<view class="divider"></view>
			<view class="info-item">
				<text class="info-label">姓名：</text>
				<text class="info-value">{{ user.name }}</text>
			</view>
			<view class="divider"></view>
			<view class="info-item">
				<text class="info-label">学号：</text>
				<text class="info-value">{{ user.studentNumber }}</text>
			</view>
			<view class="divider"></view>
			<view class="info-item">
				<text class="info-label">学院：</text>
				<text class="info-value">{{ user.college }}</text>
			</view>
			<view class="divider"></view>
			<view class="info-item">
				<text class="info-label">专业班级：</text>
				<text class="info-value">{{ user.majorClass }}</text>
			</view>
			<view class="divider"></view>
			<view class="info-item">
				<view class="info-label" @click="grades">成绩：</view>
			</view>
			<view class="divider"></view>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';
	import gradesVue from './grades.vue';
	export default {
		data() {
			return {
				src: '../../static/logo.png', // 存放选中的图片路径
			};

		},
		computed: {
			...mapState(['user']),
		},
		methods: {
			chooseImg() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					sizeType: ['original', 'compressed'],
					success: (res) => {
						this.src = res.tempFilePaths[0];
					},
					fail: (error) => {
						console.log('选择图片失败:', error);
					},
				});
			},
			login() {
				uni.navigateTo({
					url: './login',
				});
			},
			clear() {
				uni.reLaunch({
					url: './login' // 替换成你要重新加载的页面路径
				});
			},
			grades() {
				uni.navigateTo({
					url: './grades',
				});
			}
		},
	};
</script>
<style scoped>
	.container {
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.image-container {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		overflow: hidden;
		border: 2rpx solid #ccc;
		margin-bottom: 20rpx;
	}
	.selected-image {
		width: 100%;
		height: 100%;
	}
	.login {
		color: #999999;
		font-size: 13px;
		margin-right: 20%;
		margin-top: 1%;
	}
	.clear {
		color: #999999;
		font-size: 13px;
		margin-left: 20%;
		margin-top: -4.5%;
	}
	.container {
		padding: 20rpx;
	}
	.information {
		width: 80%;
	}
	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		margin-top: 8%;
	}
	.info-label {
		font-size: 40rpx;
		width: 300rpx;
		color: #333;
	}
	.info-value {
		font-size: 28rpx;
		color: #666;
	}
	.divider {
		margin-top: 8%;
		height: 2px;
		width: 100%;
		background-color: #bcbcbc;
	}
	button {
		width: 160rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		background-color: #007aff;
		color: #ffffff;
		border: none;
		border-radius: 5rpx;
		cursor: pointer;
	}
</style>